<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script>
 function myFunction(id) { document.getElementById(id).submit(); }
</script>
<style>
.custom {
    width: 78px !important;
}
text {
    white-space: normal;
}
</style>
</head>
<body>

{{{ html.navbar(out,"/web/main") }}}

  <div class="container overflow-hidden">
  <div class="row"><h4>QuickApp {{{ local qa = EM.getQA(opts.id); out(qa.name)}}}</h4></div>

  <div class="row">
    <div class="btn-group" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-outline-primary" onclick="window.location.href='/TQAE/lua?code={{{out("EM.Devices[%s].env.plugin.restart()",opts.id)}}}'">Restart</button>
{{{
  if EM.Devices[tonumber(opts.id)].dev.parentId== 0 then
   out([[<button type="button" class="btn btn-outline-primary" onclick="window.location.href='/TQAE/lua?code=EM.saveFQA(EM.Devices[%s])'">Save</button>]],opts.id)
   out([[<button type="button" class="btn btn-outline-primary" onclick="window.location.href='/TQAE/lua?code=EM.uploadFQA(EM.Devices[%s])'">Upload</button>]],opts.id)
   out([[<button type="button" class="btn btn-outline-primary" onclick="window.location.href='/web/updateQA?id=%s'">Update</button>]],opts.id)
  end
}}}
     <button type="button" class="btn btn-outline-primary" onclick="window.location.href='/web/ui?id={{{out("%s",opts.id)}}}'">UI</button>
  </div>
  </div>
  
  <div class="row">
{{{
    local D = EM.Devices[tonumber(opts.id)]
    local dev=D.dev
    out("<ul>")
    out("<li>DeviceID: %s</li>",dev.id)
    out("<li>Type: %s</li>",dev.type)
    out("<li>BaseType: %s</li>",dev.baseType or "no base type")
    out("<li>Interfaces: %s</li>",FB.json.encode(dev.interfaces))
    if D.proxy or D.childProxy then
      out("<li>Proxy: true</li>")
    end
    out("</ul>")
}}}
  </div> 
  
  <hr>
  
  <div class="row gy-4">
     <div class="col-sm-4">
       <h5>Methods</h5>
{{{ 
     local qa,fs = EM.getQA(opts.id),{}
     for k,v in pairs(qa) do
       if type(v)=='function' and k~="__copyObject" then fs[#fs+1]=k end
     end
     table.sort(fs)
     for i,n in ipairs(fs) do
      out('<form id="M%s" action="/TQAE/method" method="GET">',i)
       
      out('<div class="input-group mb-3">')
      out([[<button class="btn btn-outline-secondary" onclick="myFunction('%s')" type="button" id="M%s">self:%s</button>]],"M"..i,i,n)
      out([[<input type="hidden" id="M%s" name="qaID" value="%s">]],i,opts.id)
      out([[<input type="hidden" id="M%s" name="method" value="%s">]],i,n)
      out([[<input type="text" name="Args" id="Args" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">]])
      out("</div></form>")

     end
}}}
  </div>
  <div class="col-sm-3">
    <h5>Properties</h5>
{{{ 
     local qa,fs = EM.getQA(opts.id),{}
     local excludes={quickAppVariables=true,viewLayout=true}
     for k,v in pairs(qa.properties) do if not excludes[k] then fs[#fs+1]={k,v} end end
     table.sort(fs,function(a,b) return a[1] < b[1] end)
     for _,n in ipairs(fs) do out([[<div class="text-break">%s = %s</div>]],
     n[1],html.escape(FB.json.encode(n[2]))) end
}}}
  </div>
  <div class="col-sm-2">
    <h5>QuickVars</h5>
{{{ 
     local qa,vars = EM.getQA(opts.id),{}
     for _,v in ipairs(qa.properties.quickAppVariables or {}) do vars[#vars+1]=v end
     table.sort(vars,function(a,b) return a.name < b.name end)
     for _,v in ipairs(vars) do 
       out([[<div class="text-break">%s = %s</div>]],v.name,html.escape(FB.json.encode(v.value)))
     end
}}}
  </div>
  <div class="col-sm-2">
    <h5>View</h5>
{{{
    local qa = EM.getQA(opts.id)
    for elm,e in pairs(qa._view) do
      out("%s</br>",elm)
      for tp,v in pairs(e) do
        out([[<div class="text-break">%s = %s</div>]],tp,html.escape(FB.json.encode(v)))
      end
    end
}}}
  </div>
</div>
</div>


{{{ html.footer(out) }}}
</body>
</html>